Skip to content

[css-align] Does vertical-align on table cell set align-content safely or not? #12220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Loirooriol opened this issue May 21, 2025 · 0 comments
Open

[css-align] Does vertical-align on table cell set align-content safely or not? #12220

Loirooriol opened this issue May 21, 2025 · 0 comments
Labels
css-align-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

https://drafts.csswg.org/css-align/#distribution-block

The block axis. If a is specified its fallback alignment is used instead. If no is specified, and the block container is not a scroll container, then alignment is safe.

For table cells, the behavior of align-content: normal depends on the computed value of vertical-align: top makes it behave as start and bottom makes it behave as end; otherwise middle makes it behave as center, and all other values make it behave as baseline.

My understanding is that vertical-align: bottom should behave as align-content: end, which behaves as align-content: safe end if the cell isn't a scroll container.

<!DOCTYPE html>
<style>
table { margin: 80px 0px }
td { height: 50px; }
td::before { content: ""; display: block; height: 250%; width: 50px; background: linear-gradient(to bottom, cyan, magenta) }
</style>
<table border="1">
  <td style="overflow: visible; align-content: end"></td>
  <td style="overflow: visible; align-content: safe end"></td>
  <td style="overflow: visible; align-content: unsafe end"></td>
  <td style="overflow: visible; vertical-align: bottom"></td>
</table>
<table border="1">
  <td style="overflow: hidden; align-content: end"></td>
  <td style="overflow: hidden; align-content: safe end"></td>
  <td style="overflow: hidden; align-content: unsafe end"></td>
  <td style="overflow: hidden; vertical-align: bottom"></td>
</table>
Blink WebKit Gecko

So Blink seems wrong because it treats vertical-align: bottom as align-content: unsafe end even if it's not a scroll container. But is it even web compatible to change the legacy behavior of vertical-align? If it's a scroll container, it's not following https://drafts.csswg.org/css-align/#auto-safety-scroll either.

WebKit seems wrong since it ignores the overflow position.

Gecko avoids overflow in this case so not conclusive.
@Loirooriol Loirooriol added the css-align-3 Current Work label May 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-align-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Loirooriol